<!--
 * @Descripttion: 增加用户分组
 * @Author: YuZhenJing
 * @Date: 2020-01-12 12:01:01
 * @LastEditors  : YuZhenJing
 * @LastEditTime : 2020-01-16 10:09:58
 -->
<template>
  <div class="user-group-add">
    <el-popover
      placement="bottom"
      trigger="click"
      v-model="visible"
      width="400"
    >
      <el-card body-style="padding:8px">
        <el-form :model="formItem" :rules="rules" ref="userGroupAddForm">
          <el-form-item prop="userGroupName">
            <el-input
              placeholder="输入要增加用户分组"
              v-model="formItem.userGroupName"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="text-align:center">
          <el-button @click="closeAdd" size="mini" type="info">取消</el-button>
          <el-button
            :loading="saveLoading"
            @click="submitForm"
            size="mini"
            type="primary"
            >保存</el-button
          >
        </div>
      </el-card>
      <el-button
        icon="el-icon-circle-plus-outline"
        size="mini"
        slot="reference"
        type="primary"
        >新增</el-button
      >
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      saveLoading: false,
      formItem: {
        userGroupName: ''
      },
      rules: {
        userGroupName: [
          { required: true, message: '用户分组不能为空!', trigger: 'blur' },
          { max: 50, message: '用户分组不得超过【50】个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 取消新增
    closeAdd() {
      this.$refs.userGroupAddForm.resetFields()
      this.visible = false
    },
    // 提交表单保存用户分组信息
    submitForm() {
      this.$refs.userGroupAddForm.validate(valid => {
        if (valid) {
          this.saveLoading = true
          const saveFormItem = this.$html.post(
            'user/group/saveUserGroup',
            this.formItem
          )
          saveFormItem
            .then(data => {
              if (data.returnType == 'success') {
                this.saveLoading = false
                this.$emit('request')
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success'
                })
                this.closeAdd()
              }
            })
            .catch(() => {
              this.saveLoading = false
              console.log('error:userGroupAdd/submitForm')
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="stylus">
.user-group-add
  display inline
  margin-left 5px
</style>
